.za-button {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    border: none;
    font-weight: normal;
    text-align: center;
    overflow: hidden;
    color: var(--color-text);
    outline: 0 none;
    user-select: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-appearance: none;
    /* disabled Button */
    /* block Button */
    border-width: 1PX;
    border-style: solid;
    border-radius: var(--radius-md);
    /* Button sizes */
    /* Button themes */
}
.za-button, .za-button:active, .za-button:hover, .za-button:focus, .za-button:visited {
    text-decoration: none;
}
.za-button--disabled {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

.za-button--block {
    display: block;
    width: 100%;
}

.za-button, .za-button:hover {
    background-color: var(--button-default-background);
    border-color: var(--button-default-border);
    color: var(--button-default-color);
}
.za-button:active {
    background-color: var(--button-default-active-background);
    border-color: var(--button-default-active-border);
    color: var(--button-default-active-color);
}
.za-button--disabled {
    opacity: var(--button-disabled-opacity);
    cursor: not-allowed;
}
.za-button--disabled:active, .za-button--disabled:focus, .za-button--disabled:visited {
    background-color: var(--button-default-background);
    border-color: var(--button-default-border);
    color: var(--button-default-color);
}

.za-button--shadow {
    box-shadow: 0 3px 3px 0 var(--button-default-shadow-color);
}

.za-button--loading .za-activity-indicator.za-activity-indicator--circular circle {
    stroke: var(--theme-primary);
}

.za-button--link, .za-button--link:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--button-default-color);
}
.za-button--link:active {
    color: var(--button-default-active-color);
}
.za-button--link.za-button--disabled, .za-button--link.za-button--disabled:active, .za-button--link.za-button--disabled:hover, .za-button--link.za-button--disabled:focus, .za-button--link.za-button--disabled:visited {
    color: var(--color-text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

.za-button--ghost, .za-button--ghost:hover {
    background-color: transparent;
    border-color: var(--button-default-ghost-border);
    color: var(--button-default-ghost-color);
}
.za-button--ghost:active {
    background-color: transparent;
    border-color: var(--button-default-ghost-active-border);
    color: var(--button-default-ghost-active-color);
}
.za-button--ghost.za-button--disabled, .za-button--ghost.za-button--disabled:active, .za-button--ghost.za-button--disabled:hover, .za-button--ghost.za-button--disabled:focus, .za-button--ghost.za-button--disabled:visited {
    background-color: transparent;
    border-color: var(--border-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.za-button--lg {
    padding: 0 var(--button-padding-h-lg);
    font-size: var(--button-font-size-lg);
    height: var(--button-height-lg);
    line-height: 1.5;
}
.za-button--lg.za-button--circle {
    width: var(--button-height-lg);
    padding: 0;
}

.za-button--lg .za-icon {
    font-size: var(--button-icon-size-lg);
}
.za-button--lg.za-button--link {
    line-height: var(--button-height-lg);
}

.za-button--lg.za-button--loading .za-activity-indicator {
    width: var(--button-font-size-lg);
    height: var(--button-font-size-lg);
}

.za-button--lg * + span {
    margin-left: calc(var(--button-padding-h-lg) / 2);
}

.za-button--md {
    padding: 0 var(--button-padding-h-md);
    font-size: var(--button-font-size-md);
    height: var(--button-height-md);
    line-height: 1.5;
}
.za-button--md.za-button--circle {
    width: var(--button-height-md);
    padding: 0;
}

.za-button--md .za-icon {
    font-size: var(--button-icon-size-md);
}
.za-button--md.za-button--link {
    line-height: var(--button-height-md);
}

.za-button--md.za-button--loading .za-activity-indicator {
    width: var(--button-font-size-md);
    height: var(--button-font-size-md);
}

.za-button--md * + span {
    margin-left: calc(var(--button-padding-h-md) / 2);
}

.za-button--sm {
    padding: 0 var(--button-padding-h-sm);
    font-size: var(--button-font-size-sm);
    height: var(--button-height-sm);
    line-height: 1.5;
}
.za-button--sm.za-button--circle {
    width: var(--button-height-sm);
    padding: 0;
}

.za-button--sm .za-icon {
    font-size: var(--button-icon-size-sm);
}
.za-button--sm.za-button--link {
    line-height: var(--button-height-sm);
}

.za-button--sm.za-button--loading .za-activity-indicator {
    width: var(--button-font-size-sm);
    height: var(--button-font-size-sm);
}

.za-button--sm * + span {
    margin-left: calc(var(--button-padding-h-sm) / 2);
}

.za-button--xs {
    padding: 0 var(--button-padding-h-xs);
    font-size: var(--button-font-size-xs);
    height: var(--button-height-xs);
    line-height: 1.5;
}
.za-button--xs.za-button--circle {
    width: var(--button-height-xs);
    padding: 0;
}

.za-button--xs .za-icon {
    font-size: var(--button-icon-size-xs);
}
.za-button--xs.za-button--link {
    line-height: var(--button-height-xs);
}

.za-button--xs.za-button--loading .za-activity-indicator {
    width: var(--button-font-size-xs);
    height: var(--button-font-size-xs);
}

.za-button--xs * + span {
    margin-left: calc(var(--button-padding-h-xs) / 2);
}

.za-button--primary, .za-button--primary:hover {
    background-color: var(--button-primary-background);
    border-color: var(--button-primary-border);
    color: var(--button-primary-color);
}
.za-button--primary:active {
    background-color: var(--button-primary-active-background);
    border-color: var(--button-primary-active-border);
    color: var(--button-primary-active-color);
}
.za-button--primary.za-button--disabled {
    opacity: var(--button-disabled-opacity);
    cursor: not-allowed;
}
.za-button--primary.za-button--disabled:active, .za-button--primary.za-button--disabled:focus, .za-button--primary.za-button--disabled:visited {
    background-color: var(--button-primary-background);
    border-color: var(--button-primary-border);
    color: var(--button-primary-color);
}

.za-button--primary.za-button--shadow {
    box-shadow: 0 3px 3px 0 var(--button-primary-shadow-color);
}

.za-button--primary.za-button--loading .za-activity-indicator.za-activity-indicator--circular circle {
    stroke: var(--button-primary-color);
}

.za-button--primary.za-button--link, .za-button--primary.za-button--link:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--button-primary-ghost-color);
}
.za-button--primary.za-button--link:active {
    color: var(--button-primary-ghost-active-color);
}
.za-button--primary.za-button--link.za-button--disabled, .za-button--primary.za-button--link.za-button--disabled:active, .za-button--primary.za-button--link.za-button--disabled:hover, .za-button--primary.za-button--link.za-button--disabled:focus, .za-button--primary.za-button--link.za-button--disabled:visited {
    color: var(--color-text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

.za-button--primary.za-button--ghost, .za-button--primary.za-button--ghost:hover {
    background-color: transparent;
    border-color: var(--button-primary-ghost-border);
    color: var(--button-primary-ghost-color);
}
.za-button--primary.za-button--ghost:active {
    background-color: transparent;
    border-color: var(--button-primary-ghost-active-border);
    color: var(--button-primary-ghost-active-color);
}
.za-button--primary.za-button--ghost.za-button--disabled, .za-button--primary.za-button--ghost.za-button--disabled:active, .za-button--primary.za-button--ghost.za-button--disabled:hover, .za-button--primary.za-button--ghost.za-button--disabled:focus, .za-button--primary.za-button--ghost.za-button--disabled:visited {
    background-color: transparent;
    border-color: var(--border-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.za-button--danger, .za-button--danger:hover {
    background-color: var(--button-danger-background);
    border-color: var(--button-danger-border);
    color: var(--button-danger-color);
}
.za-button--danger:active {
    background-color: var(--button-danger-active-background);
    border-color: var(--button-danger-active-border);
    color: var(--button-danger-active-color);
}
.za-button--danger.za-button--disabled {
    opacity: var(--button-disabled-opacity);
    cursor: not-allowed;
}
.za-button--danger.za-button--disabled:active, .za-button--danger.za-button--disabled:focus, .za-button--danger.za-button--disabled:visited {
    background-color: var(--button-danger-background);
    border-color: var(--button-danger-border);
    color: var(--button-danger-color);
}

.za-button--danger.za-button--shadow {
    box-shadow: 0 3px 3px 0 var(--button-danger-shadow-color);
}

.za-button--danger.za-button--loading .za-activity-indicator.za-activity-indicator--circular circle {
    stroke: var(--button-danger-color);
}

.za-button--danger.za-button--link, .za-button--danger.za-button--link:hover {
    background-color: transparent;
    border-color: transparent;
    color: var(--button-danger-ghost-color);
}
.za-button--danger.za-button--link:active {
    color: var(--button-danger-ghost-active-color);
}
.za-button--danger.za-button--link.za-button--disabled, .za-button--danger.za-button--link.za-button--disabled:active, .za-button--danger.za-button--link.za-button--disabled:hover, .za-button--danger.za-button--link.za-button--disabled:focus, .za-button--danger.za-button--link.za-button--disabled:visited {
    color: var(--color-text-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

.za-button--danger.za-button--ghost, .za-button--danger.za-button--ghost:hover {
    background-color: transparent;
    border-color: var(--button-danger-ghost-border);
    color: var(--button-danger-ghost-color);
}
.za-button--danger.za-button--ghost:active {
    background-color: transparent;
    border-color: var(--button-danger-ghost-active-border);
    color: var(--button-danger-ghost-active-color);
}
.za-button--danger.za-button--ghost.za-button--disabled, .za-button--danger.za-button--ghost.za-button--disabled:active, .za-button--danger.za-button--ghost.za-button--disabled:hover, .za-button--danger.za-button--ghost.za-button--disabled:focus, .za-button--danger.za-button--ghost.za-button--disabled:visited {
    background-color: transparent;
    border-color: var(--border-disabled);
    color: var(--color-text-disabled);
    cursor: not-allowed;
}

.za-button--rect {
    border-width: 1PX;
    border-style: solid;
    border-radius: 0;
}

.za-button--radius {
    border-width: 1PX;
    border-style: solid;
    border-radius: var(--radius-md);
}

.za-button--round {
    border-width: 1PX;
    border-style: solid;
    border-radius: var(--radius-round);
}

.za-button--circle {
    border-width: 1PX;
    border-style: solid;
    border-radius: var(--radius-circle);
}

.za-button__content {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
